<template>  
    <div class="title">
		<div>
			<img :src="logo" alt="Logo Icon" class="logo-img" />  
		</div>
      <div class="left">  
        <a v-for="(item, index) in leftArray" :key="index" href="javascript:void(0)">{{ item }}</a>  
      </div>  
      <div class="right">  
		<div class=" right-1" style="display: flex;height: 100%;align-items: center;border-bottom: 0.2px solid #ececec;">
	   <a class="mypurse" style="margin-right: 1%;width: 100px;" @click="router.push('/myPurse/account')">我的钱包</a>
	   <a class="personal" style="margin-right: 1%;width: 100px;" @click="router.push('/personalCenter')">个人中心</a>
	   </div>
      </div>  
    </div>  

</template>  
  
<script setup>  
import { computed } from 'vue';
import { ref } from 'vue';  
import CartIcon from '@/components/components-zjm/CartIcon';  
import emptyCartIcon from '@/components/components-zjm/emptycart';  
import logo from '@/components/components-zjm/logo2.png'; 
import router from '@/router';


  const showCart = ref(false);  
  const leftArray = ref([
		'商城首页 ',
	]);  
   const rightArray = ref([
   	'我的钱包',
   	'个人中心',
   ]);  
   const cartItems = ref([  
      ]);

	 const cartstatus = computed(() => cartItems.value.length === 0 ? 0 : 1);
const cartCount = computed(() => cartItems.value.length); 
</script>  
  
<style scoped lang="scss">  
.title { 
	padding-left: 16.5%;
	padding-right: 5%;
	.logo-img{
		height: 80px;
		width: auto;
	}
  height: 80px;  
  // background-color: #2986f5;  
  min-width: 1226px;  
  display: flex;  

  a {  
    color: #0c0e61;  
    font-size: 18px;  
    margin-right: 16px;  
  text-decoration: none;
  
    &:hover { 	 
      color: red;  
    }  
  }  
  
  .left{
	  display: flex;
	  align-items: center;
		margin-left: 50px;
	 
  }
   .right {  
	   border-bottom:0.1px solid #ececec;
	margin-left: 30%;
    display: flex;  
    align-items: center;    
  	padding-left: 9%;
  }  
 
 .right {
 	  
   display: flex;  
 	margin-right: 50px;
   align-items: center;  
  
 
 
 
 }  
  
 .right {  
 	  
   position: relative;  
  z-index: 2;
   .cart-content {  
	    border: 0.1px solid #ececec;
		border-top: none;
     position: absolute;  
     top: 100%;
     width: 74.7%; 
 	height: auto;
     background-color: #ffffff;  
     // box-shadow: 0 2px 5px #a8a8a8;  
     .empty {  
       display: flex;  
       justify-content: space-around;  
       .emptycart-content {  
         font-size: 12px;  
         width: 300px; 
         margin-top: 18px;
		
         color: #8a8a8a;  
				 background-color: white;
       }  
     } 
 	   .full {
	
 	   		.head{
 				height: 40px;
 				background-color: #f8f8f8;
 				font-size: 15px;
 				display: flex;
 				padding-left: 10px;
 				align-items: center;
 				
 			}
 			.main{
 				max-height: 300px;
 				overflow-y: auto;
 				padding-left: 15px;
 				padding-top: 15px;
 				.cart-item{
 					
 					display: flex;
 					 border-bottom: 1px solid #949494;
 					.cart-item-text{
 						width: 45%;
 						font-size: 13px;
 					}
 					.p-num-delete{
 						margin-left: 30px;
 						.p-num{
 							font-size: 16px;
 							color:#5b5b5b
 						}
 						.delete{
 							margin-left: 56px;
 							.delete-button{
 								&:hover {  
 								  color: #ff4108;  
 								}  
 							}
 						}
 					}
 				}
 				
 			}
 	   		.foot{
 				height: 50px;
 				background-color: #f5f5f5;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				padding-left: 20px;
 				padding-right: 20px;
 				.foot-text{
 					font-size: 14px;
 				}
 				.gocart-button{
 					border: none;
 					background-color: red;
 					width: 68px;
 					height: 29px;
 					border-radius: 5px;
 					color: #f7f7f7;
 				}
 			}
 				
 	   }  
 	  }
     
    }
  }  
 
</style>